<template>
    <!-- 地址信息 -->
    <van-contact-card type="edit" :tel="address.mobile" :name="address.consignee" @click="toAddrssPages"
        v-if="Object.values(address).length > 0" />
    <van-contact-card type="add" @click="toAddrssPages" v-else />
    <!-- 购物车商品信息 -->
    <van-card :price="prices" :num="nums" :thumb="product.thumbs_text">
        <template #title>
            <h3>{{ product.name }}</h3>
        </template>
        <template #desc>
            <div v-if="attrs">
                <van-tag v-for="items in attrs" type="primary" size="large" style="margin-right: 10px;">{{
                    items.name }}</van-tag>
            </div>
            <div v-else>
                <van-tag type="danger" size="large" style="margin-right: 10px;">无商品规格</van-tag>
            </div>
        </template>
    </van-card>

    <!-- 支付方式 -->
    <van-field v-model="payName" is-link readonly label="支付方式" placeholder="选择支付方式" @click="showPicker = true" />
    <van-popup v-model:show="showPicker" round position="bottom">
        <van-picker :columns="columns" @cancel="showPicker = false" @confirm="onConfirm" />
    </van-popup>


    <!-- 订单备注 -->
    <van-field v-model="remark" rows="2" autosize label="订单备注" type="textarea" maxlength="120" placeholder="请输入订单备注"
        show-word-limit />

    <!-- 提交订单 -->
    <van-submit-bar :price="total" button-text="确认支付" @submit="onSubmit" />

</template>
<script setup>
const { proxy } = getCurrentInstance()
const LoginUser = reactive(proxy.$cookies.get('LoginUser'));
const proid = ref(proxy.$route.query.proid ?? 0)
const nums = ref(proxy.$route.query.nums ?? 0)
const address = ref(proxy.$cookies.get('address') ?? {})
const attrs = ref(proxy.$cookies.get('relationids') ? JSON.parse(proxy.$cookies.get('relationids')) : [])
const product = ref({ team: 0 })
const prices = ref(0)
const remark = ref('')
const columns = [
    { text: '余额', value: 'money' },
    { text: '微信', value: 'wx' },
    { text: '支付宝', value: 'zfb' }
];

//优惠券
const payName = ref('余额');
const showPicker = ref(false);
const pay = ref('money')

const onConfirm = ({ selectedOptions }) => {
    showPicker.value = false;
    payName.value = selectedOptions[0].text;
    pay.value = selectedOptions[0].value;
};


onBeforeMount(() => {
    getProductInfoData()
    if (JSON.stringify(address.value) == '{}') {
        getAddressSelected()
    }
})
const getProductInfoData = async () => {
    let result = await Api.ProductInfo({
        busid: LoginUser.id,
        proid: proid.value
    })

    if (result.code == 1) {
        product.value = result.data.productinfo
    }
}

const getAddressSelected = async () => {
    let result = await Api.AddressOrder({
        busid: LoginUser.id
    })

    if (result.code == 1) {
        address.value = result.data
        proxy.$cookies.set("address", {
            id: result.data.id,
            consignee: result.data.consignee,
            mobile: result.data.mobile
        });
    }
}

const toAddrssPages = () => {
    proxy.$router.push({
        path: '/business/address/index',
        query: {
            action: 'order'
        }
    })
}

// 计算
const total = computed(() => {
    let num = 0
    // 商品属性
    if (attrs.value.length > 0) {
        let totals = attrs.value.reduce((accumulator, item) => accumulator + (parseFloat(item.price) / 100), 0,);
        num = parseFloat(product.value.team) + parseFloat(totals);
        prices.value = parseFloat(product.value.team) + parseFloat(totals)
        console.log(prices.value)
        num = (parseFloat(num) * parseInt(nums.value)).toFixed(2);
    } else {
        num = (parseFloat(product.value.team) * parseInt(nums.value)).toFixed(2);
        prices.value = parseFloat(product.value.team)
    }
    return num * 100
})
const route = useRoute()
const teamid = route.query.teamid
const onSubmit = async () => {

    if (JSON.stringify(address.value) == '{}') {
        error('请选择收货地址');
        return false;
    }

    if (!pay.value) {
        error('请选择支付方式');
        return false;
    }

    let relationids = [];
    // 商品属性
    if (attrs.value.length > 0) {
        relationids = attrs.value.map((item) => item.id)
    }

    let data = {
        busid: LoginUser.id,
        addrid: address.value.id,
        total: total.value / 100,
        remark: remark.value,
        pay: pay.value,
        proid: proid.value,
        nums: nums.value,
        attrs: relationids.toString(),
        teamid: teamid,
        prices: prices.value
    }

    let result = await Api.TeamAdds(data)
    if (result.code == 1) {
        success({
            message: result.msg,
            onClose: () => {
                proxy.$router.push('/business/index')
            }
        });
    } else {
        error(result.msg);
    }
}

</script>
<style scoped>
/* 组件穿透样式写法 */
:deep .van-field__control:read-only {
    text-align: right;
}
</style>